<template>
    <el-form ref="form" :model="form" label-width="80px">
        <div style="height:30px;background:rgba(0,0,0,.2);text-align:left;line-height:30px;margin:10px 0">基础资料</div>
        <el-form-item label="用户名:">
            白岩松
        </el-form-item>
        <el-form-item label="性别:">
            男
        </el-form-item>
        <el-form-item label="头像:">
            <img src="" alt="">
        </el-form-item>
        <el-form-item label="登录密码:">
            <el-input type="password" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item label="年龄:">
            <el-input type="text" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item label="身高:">
            <el-input type="text" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item label="体重:">
            <el-input type="text" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item label="电话:">
            <el-input type="telephone" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item label="微信号:">
            <el-input type="text" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item label="风格:">
            <el-checkbox-group v-model="form.type">
            <el-checkbox label="西式婚礼" name="type"></el-checkbox>
            <el-checkbox label="中式婚礼" name="type"></el-checkbox>
            <el-checkbox label="汉唐婚礼" name="type"></el-checkbox>
            <el-checkbox label="商务主持" name="type"></el-checkbox>
            <el-checkbox label="宴会主持" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <div style="height:30px;background:rgba(0,0,0,.2);text-align:left;line-height:30px;margin:10px 0">视频资料</div>
        <div style="text-align:left">
            <div>
                <div style="display:inline-block;width:100px;text-align:right">
                    视频一:
                </div>
            </div>
            <div>
                <div style="display:inline-block;width:100px;text-align:right">
                    标题:
                </div>
                <input type="text" style="outline:none;border:1px solid gray;width:150px;height:20px"/>
            </div>
            <div>
                <div style="display:inline-block;width:100px;text-align:right">
                    视频链接:
                </div>
                <input type="text" style="outline:none;border:1px solid gray;width:150px;height:20px"/>
            </div>
        </div>
        <div style="height:30px;background:rgba(0,0,0,.2);text-align:left;line-height:30px;margin:10px 0">个人介绍</div>

        <div id="demo1"></div>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
import wangEditor from 'wangeditor'
  export default {
    data() {
      return {
            editor: null,
            editorData: '',
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    },
    mounted(){
         const editor = new wangEditor(`#demo1`)
        // 配置 onchange 回调函数，将数据同步到 vue 中
        editor.config.onchange = (newHtml) => {
        this.editorData = newHtml
        }
        // 创建编辑器
        editor.create()
        this.editor = editor
    },
    beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy()
    this.editor = null
  }
  }
</script>

<style>
.el-form-item{
    text-align: left;
}
.el-input{
    width: 300px;
}
</style>